{include file='public/header'/}
<div class="container">
    <div class="row">
        <!-- 左侧布局 -->
        <div class="col-md-3 col-sm-4">
            <!-- 左侧菜单区 -->
            <div class="panel panel-default">
                <div class="panel-heading">菜单导航</div>
                <div class="panel-body">
                    <!-- Panel content -->
                    <ul class="nav nav-pills nav-stacked">
                        <li role="presentation" class="active"><a href="javascript:;" title="商品列表"
                                onclick="fireMenu(this)" data-controller="index" data-action="shop_list">商品列表</a></li>
                        <li role="presentation"><a href="javascript:;" onclick="fireMenu(this)" data-controller="carts"
                                data-action="index" title="购物车">我的购物车</a></li>
                        <li role="presentation"><a href="javascript:;" onclick="fireMenu(this)" data-controller="orders"
                                data-action="myorders" title="我的订单">我的订单</a></li>
                        <li role="presentation"><a href="javascript:;" onclick="fireMenu(this)"
                                data-controller="account" data-action="login" title="用户登录">用户登录</a></li>
                        <li role="presentation"><a href="javascript:;" onclick="fireMenu(this)"
                                data-controller="account" data-action="profile" title="个人资料">个人资料</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 右侧操作区 -->
        <div class="col-md-9 col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">商城中心</h3>
                </div>
                <div class="panel-body">
                    <!-- Panel content -->
                    <!-- 商品列表 -->
                    <div class="row">
                        <iframe id="mainFrame" name="main" src="/index/shop_list/" scrolling="yes"
                            style="width: 100%;border: 0;"></iframe>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 父级页面获取子级页面的高度 给元素设置高度
    function setIframeHeight(id) {
        try {
            var iframe = document.getElementById(id);
            if (iframe.attachEvent) {
                iframe.attachEvent("onload", function () {
                    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight + 40;
                });
                return;
            } else {
                iframe.onload = function () {
                    iframe.height = iframe.contentDocument.body.scrollHeight + 40;
                };
                return;
            }
        } catch (e) {
            throw new Error('setIframeHeight Error');
        }
    }

    // 子级页面给父级页面元素设置高度
    function setParentIframeHeight(id) {
        try {
            var parentIframe = parent.document.getElementById(id);
            if (window.attachEvent) {
                window.attachEvent("onload", function () {
                    parentIframe.height = document.documentElement.scrollHeight;
                });
                return;
            } else {
                window.onload = function () {
                    parentIframe.height = document.body.scrollHeight;
                };
                return;
            }
        } catch (e) {
            throw new Error('setParentIframeHeight Error');
        }
    }

    // 哈希路径
    function init() {
        var hash = window.location.hash;
        if (hash.length) {
            document.querySelector('iframe[name="main"]').setAttribute('src', '' + hash.replace('#', ''));
            // 改变按钮默认选中
            var arr = hash.replace('#', '').split(/\//).filter(el => el);
            document.querySelectorAll('li[role="presentation"]').forEach(ele => ele.classList.remove('active'));
            document.querySelector('a[data-controller="' + arr[0] + '"][data-action="' + arr[1] + '"]').parentNode.classList.add('active');
        }
        setIframeHeight("mainFrame"); //重设框架高度
    }
    init();

    // 触发菜单
    function fireMenu(othis) {
        var controller = othis.dataset.controller.toLowerCase();
        var action = othis.dataset.action.toLowerCase();
        var url = '/' + controller + '/' + action + '/';
        document.querySelector('iframe[name="main"]').setAttribute('src', url);
        window.location.hash = '/' + controller + '/' + action + '/';
        // 改变按钮选中状态
        document.querySelectorAll('li[role="presentation"]').forEach(ele => ele.classList.remove('active'));
        othis.parentNode.classList.add('active');
    }
</script>

{include file='public/footer'/}